<template>
  <div v-if="!obj.isLogin" class="tip">
    <span
      >您还没有登录，点击<el-link @click="router.push('/login')">这里</el-link
      >进行登录</span
    >
  </div>
  <div v-else>
    <el-table :data="borrowData.list" border stripe style="width: 100%">
      <el-table-column prop="ISBN" label="书号" width="180" />
      <el-table-column prop="bookname" label="书名" width="180" />
      <el-table-column prop="lendNum" label="借阅数目" />
      <el-table-column prop="LendDate" label="借阅日期" />
      <el-table-column prop="ReturnDate" label="归还时间" />
      <el-table-column label="是否归还">
        <template #default="scope">
          <span style="margin-left: 10px">{{
            scope.row.isReturn ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否丢失">
        <template #default="scope">
          <span style="margin-left: 10px">{{
            scope.row.isLost  ? "是" : "否"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button
            size="small"
            type="warning"
            :disabled="scope.row.isLost"
            @click="handleLost(scope.row)"
            >申报丢失</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="page"
      v-model:current-page="page"
      :total="borrowData.list.length"
      layout="prev, pager, next"
    />
  </div>
</template>

<script setup>
import router from "@/router";
import { onBeforeMount, reactive ,ref, watch} from "vue";
import { pagination, post_json } from "../../stores/requestMethod";
import {ElMessageBox,ElMessage} from 'element-plus'
const data = JSON.parse(sessionStorage.getItem("loginAccount"));
const obj = reactive({
  isLogin: false,
});
const borrowData = reactive({
  list: [],
  showList : []
});
const page = ref(1)
const getBorrow = () => {
  fetch(`http://127.0.0.1:5000/records/${data.id}`, {
    method: "GET",
    mode: "cors",
    credentials: "include",
  })
    .then((response) => response.json())
    .then((data) => {
        borrowData.list = data.data
        borrowData.showList = pagination(10,page.value,JSON.parse(JSON.stringify(borrowData.list)))
    })
    .catch((err) => console.log(err));
};
const handleLost = (row)=>{
  ElMessageBox.confirm("申报丢失后需偿还书籍金额,您确定书籍丢失了吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let send = {
      ReaderID : data.id,
      ISBN : row.ISBN
    }
    post_json('http://127.0.0.1:5000/lends/lostBook',
    JSON.stringify(send),
    (res) =>{
      if(res.code == 1){
        ElMessage({
          message : '申报成功,请及时还款!',
          type : 'warning'
        })
      }
      getBorrow()
    })
  })
  
}
onBeforeMount(() => {
  if (data !== null) {
    getBorrow();
    obj.isLogin = true;
  }
});
watch(page, (value, oldValue) => {
  borrowData.showList = pagination(
    10,
    value,
    JSON.parse(JSON.stringify(borrowData.list))
  );
});
</script>

<style scoped>
.tip {
  position: absolute;
  left: 50%;
  top: 50%;
}
.page{
    position: absolute;
    left: 50%;
    
}
</style>
